import React, { useState } from 'react';
import { ProForm, ProFormInstance, ProFormMoney, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { Card, InputNumber, Space, Upload, UploadFile, Image, Modal } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { request, useModel } from '@umijs/max';

interface BaseFormProps {
  formRef: React.MutableRefObject<ProFormInstance | undefined>
  fileKey: string | undefined
}

interface MFile extends UploadFile {
  id?: number | string
}

export default function BaseForm(props : BaseFormProps) {
  const {formRef, fileKey} = props
  const { fileList, setFileList } = useModel('Goods.SaveOrUpdate.components.model')

  const [preview, setPreview] = useState(false)
  const [previewImage, setPreviewImage] = useState('')
  const { confirm } = Modal;

  const showRemoveConfirm = () => {
    return new Promise((resolve, reject) => {
      confirm({
        title: '确定要删除这个图片吗?',
        icon: <ExclamationCircleFilled />,
        content: '请注意，删除后无需保存将立即生效，请谨慎操作',
        onOk() {
          resolve(true)
        },
        onCancel() {
          reject(false)
        },
      });
    })
  };

  return (
    <Space direction={'vertical'} style={{width: '100%'}}>
      <Card key={'baseForm'} title={'基础信息'}>
        <ProForm submitter={false} formRef={formRef}>
          <ProFormText label={'商品名称'} name={'name'} rules={[{ required: true, message: '请输入商品名称'}]}></ProFormText>
          <ProFormTextArea label={'商品描述'} name={'description'}></ProFormTextArea>
          <ProFormMoney label={'金额'} name={'price'} rules={[{ required: true, message: '请输入商品价格'}]}></ProFormMoney>
          <ProFormMoney label={'原价'} name={'originPrice'} tooltip={'没有则不显示'}></ProFormMoney>
          <ProForm.Item label={'规格'} name={'size'} rules={[{ required: true, message: '请输入商品规格'}]}>
            <InputNumber prefix={'1 *'} placeholder={'请输入'} style={{width: '300px'}}/>
          </ProForm.Item>
        </ProForm>
      </Card>
      <Card title={'图片(请注意，操作影像立即生效，请谨慎操作)'}>
        <Upload
          listType={'picture-card'}
          fileList={fileList}
          onPreview={(file: UploadFile) => {
            setPreview(true)
            setPreviewImage(file?.url || '')
          }}
          onRemove={async (file: MFile) => {
            await showRemoveConfirm()
            console.log('开始删除', file);
            await request(`/tools-file/removeById?id=${file.id}`, {
              method: 'post'
            })
            return Promise.resolve()
          }}
          action={'/api/tools-file/upload'}
          data={{
            modelCode: 'MA001',
            busiKey: fileKey
          }}
          onChange={(info) => {
            setFileList(info.fileList)
          }}
        >
          <span>上传</span>
        </Upload>
        <Image hidden={true} preview={{
          visible: preview,
          onVisibleChange: (visible) => setPreview(visible),
          afterOpenChange: (visible) => !visible && setPreviewImage(''),
        }} src={previewImage}></Image>
      </Card>
    </Space>
  )
}
